<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-simplevalidator-1.0.js"></script>
<link rel="stylesheet" type="text/css" href="../css/common.css">
<link rel="stylesheet" type="text/css" href="../css/jquery-simplevalidator.css">
<script type="text/javascript">
	$(document).ready(function() {
		$("#demoform").bindSimpleValidator();
	});
</script>
</head>
<body>
	<input type="button" value="Back" onclick="history.back();">
	<div class="center">
		<h3>DEMO 1</h3>
		<br>
		<form action="submit.html" method="post" id="demoform">
			<div>
				text:
				<input type="text" name="tt" pattern="[\d]+" maxlength="20" />
			</div>
			<div>
				textarea:
				<textarea name="textarea" rows="3" cols="10" required="true" maxlength="20"></textarea>
			</div>
			<div>
				maxUTF8ByteLength:
				<textarea name="maxUTF8ByteLength" rows="3" cols="10" maxUTF8ByteLength="20" lengtherrormessage="byte length can't be greater than 20"></textarea>
			</div>
			<div>
				number:
				<input type="number" name="number" typeerrormessage="should be a number!" required="required" />
			</div>
			<div>
				email:
				<input type="email" name="email" placeholder="Your email here!" />
			</div>
			<div>
				date:
				<input type="date" name="date" typeerrormessage="please input a date[yyyy/MM/dd]" />
			</div>
			<div>
				datetime:
				<input type="datetime" name="datetime" />
			</div>
			<div>
				range:
				<input type="range" name="range" min="10" max="50" rangeerrormessage="must between 10 and 50" />
			</div>
			<div>
				check1:
				<input type="checkbox" name="check1" required="required" />
			</div>
			<div>
				radio:
				<input type="radio" name="radio1" required="required" value="true" />
				TRUE
				<input type="radio" name="radio1" required="required" value="false" />
				FALSE
			</div>
			<div>
				select:
				<select name="select1" class="required" requiredmessage="Not select!">
					<option value="-1" class="nullvalue">--please select--</option>
					<option value="1">option1</option>
					<option value="2">option2</option>
					<option value="3">option3</option>
				</select>
			</div>
			<div>
				<input type="submit" value="submit" />
			</div>
		</form>
	</div>
</body>
</html>